
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="author" content="m.jianke.com">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta name="keywords" content="郑州慈善总会,郑州慈善总会手机版">
<meta name="description" content="郑州慈善总会手机版手机版全新上线">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css">
</head>

<body class="mhome hide-landing">
  <div class="jk" id="jk">
   
    <div class="jk-main-search">
      <div class="jk-search-box">
        <div class="jk-logo">温暖瞬间</div>
        <div class="jk-login">
          <a href="#"><img src="images/wode.png"></a>
        </div>
        <div class="clear"></div>
      </div>
    </div>

    <div class="jk" id="jk-scroll">
         <link rel="stylesheet" href="css/css.css">
    <script type="text/javascript">
        document.write('<script type="text/javascript"  src="http://gongyi.qq.com/js/tjs/gy_jsonindex.js?'+Math.random()+'"><\/script>');
        document.write('<script type="text/javascript" src="http://ssl.gongyi.qq.com/js/weixin/act/act_99_rule.js?'+Math.random()+'"><\/script>');
    </script>

    <div class="banner">
        <ul class="slidepic">
            <li style="background-image:url(images/v_pic1.jpg); display: block;"></li>
            <li style="background-image:url(images/v_pic2.jpg);"></li>
            <li style="background-image:url(images/v_pic3.jpg);"></li>
            <li style="background-image:url(images/v_pic4.jpg);"></li>
            <li style="background-image:url(images/v_pic5.jpg);"></li>
        </ul>
        <div class="mask"></div>
        <a href="javascript:void(0)" class="pause"></a>
        <div class="banner-wrap">
            <h2>9.9公益日  一起爱</h2>
            <a href="javascript:void(0)" class="play"></a>
            <div class="banner-bottom-wrap">
                <div class="banner-desc">
                    <p>公益组织 数十家爱心企业</p>
                    <p>一起温暖这个世界</p>
                </div>
                <div class="people-num statis-num" id="countPeople" style="display:none;">2,002,546</div>
            </div>
            
        </div>
    </div>
    
 <div class="video-wrap">
        <div class="video-close"></div>
        <div class="video-area">
            <div id="mod_player"></div>
        </div>
    </div>
<script language="javascript" src="js/tvp.player_v2.js" charset="utf-8"></script>
<script async src="js/flashplayer.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/countup.js"></script>
<script type="text/javascript">

    var video = new tvp.VideoInfo();
    video.setVid("x0163n4x6ur");
    video.setTitle("99公益日一起爱");
    var player = new tvp.Player();
    
    var project = {
        proind:0,
        companyind:0,
        thxind:0,
        videostatic:0,
        init:function(){
            this.countPeople();
            this.proinit();
            this.videoinit();
            this.slideinit();
            this.slidePic();
            this.companyInit();
        },
        videoinit:function(){
            var media = $("#bannerVideo")[0];
            $("#bannerVideo").on("ended",function(){
                $(".banner-wrap,.mask,.play,.slidepic").show();
                $(".video").hide();
                media.currentTime = 0;
                project.countPeople();
            })
        },
        slideinit:function(){
            var docW = $(document).width();
            var picH = parseInt(docW / 2.086 -10);
            $(".slidepic").css({
                height:picH+'px'
            })

            
        },
        slidePic:function(ind){
            var ind = 0;
            var countPic = $(".slidepic li").length;
            var $slideli = $(".slidepic li");
            setInterval(function(){
                ind >= countPic-1 ? ind = 0 : ind++;
                $slideli.fadeOut(1500).eq(ind).fadeIn(1500);
            },5000)
        },
        countPeople:function(){ //捐款总人数
            var peo_num = globalJsonIndexObject.systemPeopleTimesTotalCnt;
            var options = {
                useEasing : true,
                useGrouping : true,
                separator : ',',
                decimal : '.'
            };
            var countPeople = new countUp("countPeople", 0, 127941762,0,1,options);
            countPeople.start();
        },
        companyShow:function(ind){ //支持企业展示
            var indA = this.companyind * 8 + ind;
            $(".company-list li").fadeOut().eq(indA).fadeIn();
            $(".company a").removeClass("active").eq(ind).addClass("active");
        },
        companyInit:function(){
            var $itemLogoInner = $(".logo-long .logo-inner");
            var logoSize = $itemLogoInner.size();
            var longW = logoSize * 1050;
            $(".logo-long").css("width",longW+'px');
        },
        companygoto:function(ind,obj){
            var $logowrap = obj.parents(".logo-wrap");
            var companySize = $logowrap.find(".logo-inner").length;

            if(ind<companySize-1){
                $logowrap.find(".logo-right").show();
            }else{
                $logowrap.find(".logo-right").hide();
            }

            if(ind>0){
                $logowrap.find(".logo-left").show();
            }else{
                $logowrap.find(".logo-left").hide();
            }

            var longW = ind * 1050 * -1;
            $logowrap.find(".logo-long").animate({
                "left":longW+'px'
            })


        },
        proinit:function(){
            var $proitem = $(".pro-list-inner .pro-item");
            var proSize = $proitem.length;
            var proW = $proitem.width();
            var prolong = proW * proSize;
            $(".pro-list-inner").css({
                "width":prolong+'px',
                "position":'relative'
            });
        },
        proShow:function(ind){
            var $proitem = $(".pro-list-inner .pro-item");
            var proSize = $proitem.length;
            var proW = $proitem.eq(0).width();
            var proPosition = proW * ind * -1;

            if(ind>0){
                $(".project-wrap .pro-left").show();
            }else{
                $(".project-wrap .pro-left").hide();
            }

            if(ind<proSize-1){
                $(".project-wrap .pro-right").show();
            }else{
                $(".project-wrap .pro-right").hide();
            }

            

            $(".project .pro-list-inner").animate({
                "left":proPosition+'px'
            },200)
        }
    }

    project.init();

    $(window).on("resize",function(){
        project.slideinit();
    })

    //banner视频
    $(".play").on("click",function(){
        $(".video-wrap").fadeIn();
        
        if(project.videostatic==0){
            var videoW = $(".video-area").width();
            var videoH = videoW / 1.896;
            var mt = videoH / 2 * -1;
            $(".video-area").css({
                "marginTop":mt+'px',
                "width":videoW+'px',
                "height":videoH+'px'
            });
            player.create({
                width:videoW+'px',
                height:videoH+'px',
                autoplay:true,
                isHtml5ControlAlwaysShow:false,
                html5VodUIFeature:false,
                isOcxHideControl:true,
                isVodFlashShowCfg:false,
                isLiveFlashShowCfg:false,
                isVodFlashShowNextBtn:false,
                isVodFlashShowSearchBar:false,
                isVodFlashShowEnd:false,
                video:video,
                modId:"mod_player"
            });
            project.videostatic = 1;
        }
        
        // $(this).hide();
        // $(".banner-wrap,.mask,.slidepic").hide();
        // $(".video,.pause").show();
        // $("#bannerVideo")[0].play();
    })

    $(".video-close").on("click",function(){
        $(".video-wrap").fadeOut();
    })

    $(".pause").on("click",function(){
        $(this).hide();
        $(".banner-wrap,.mask,.slidepic,.play").show();
        $(".video,.pause").hide();
        $("#bannerVideo")[0].pause();
    })
    function newGetJSON(url, callback, mothed){
        mothed = mothed || '_Callback';
        window[mothed] = function (data){callback(data); /* delete _Callback; */}
        jQuery.getScript(url);
    }

   
</script>


<div class="case_main">
<div class="case">
    <div class="case_txt">项目分类</div>
    <div class="jk-search-form-box">
      <div class="jk-seach-input">
        <input type="text" placeholder="请输入公益项目名称" class="jk-search-text" maxlength="20" autocomplete="off" id="wd" name="wd" onkeyup="return checksearch(event); jk_hdjd()"/>
      </div>
    </div>
    <div class="clear"></div>
</div>    
    <div class="case_list">
        <ul>
           <li><a href="#"><img src="images/case1.png"></a>  <a href="#"><span>公益活动</span></a></li>
           <li><a href="#"><img src="images/case1.png"></a>  <a href="#"><span>急难救助</span></a></li>
           <li><a href="#"><img src="images/case1.png"></a>  <a href="#"><span>慈善微店</span></a></li>
        </ul>
    </div>

</div>

<div class="main">
 <!-- 明星 -->
        <div class="start module" style="block">
            <div class="star_title">主持人代言公益项目
                <span style=" float:right; font-size:0.8rem; font-weight:normal; margin-right:2%;">>>更多</span> 
            </div>
            <div class="start-area">
                <div class="case_list1">
                    <ul>
                        <li>
                            <a href="#"><img src="images/start1.png"></a>
                            <div class="pro-item-area">
                                <h2 class="start-name">王络丹</h2>
                                <h3 class="pro-desc">支持 <a href="#">贫困孤儿助养</a> 项目</h3>
                                <p class="proj12">已有 <strong>32, 323</strong> 人捐助 &nbsp;&nbsp;&nbsp;&nbsp;</p>
                                <p class="proj12">已筹 <strong>3, 341</strong> 元</p>
                                <p class="start-text proj12_org">善款接收：中华社会救助基金会</p>
                            </div>
                        </li>
                        <li>
                            <div class="start-photo-area">
                                <a href="#" class="item-link">
                                    <img src="images/start2.png" class="start-photo">
                                </a>
                            </div>
                            <div class="pro-item-area">
                                <h2 class="start-name">黄晓明</h2>
                                <h3 class="pro-desc">支持 <a href="#">贫困孤儿助养</a> 项目</h3>
                                <p class="proj12">已有 <strong>32, 323</strong> 人捐助 &nbsp;&nbsp;&nbsp;&nbsp;</p>
                                <p class="proj12">已筹 <strong>3, 341</strong> 元</p>
                                <p class="start-text proj12_org">善款接收：中华社会救助基金会</p>
                            </div>
                        </li>
                        <li>
                            <div class="start-photo-area">
                                <a href="#" class="item-link">
                                    <img src="images/start1.png" class="start-photo">
                                </a>
                            </div>
                            <div class="pro-item-area">
                                <h2 class="start-name">唐嫣</h2>
                               <h3 class="pro-desc">支持 <a href="#">贫困孤儿助养</a> 项目</h3>
                                <p class="proj12">已有 <strong>32, 323</strong> 人捐助 &nbsp;&nbsp;&nbsp;&nbsp;</p>
                                <p class="proj12">已筹 <strong>3, 341</strong> 元</p>
                                <p class="start-text proj12_org">善款接收：中华社会救助基金会</p>
                            </div>
                        </li>
                        <li>
                            <div class="start-photo-area">
                                <a href="#" class="item-link">
                                    <img src="images/start2.png" class="start-photo">
                                </a>
                            </div>
                            <div class="pro-item-area">
                                <h2 class="start-name">欧豪</h2>
                                <h3 class="pro-desc">支持 <a href="#">贫困孤儿助养</a> 项目</h3>
                                <p class="proj12">已有 <strong>32, 323</strong> 人捐助 &nbsp;&nbsp;&nbsp;&nbsp;</p>
                                <p class="proj12">已筹 <strong>3, 341</strong> 元</p>
                                <p class="start-text proj12_org">善款接收：中华社会救助基金会</p>
                            </div>
                        </li>
                        <li>
                            <div class="start-photo-area">
                                <a href="#" class="item-link">
                                    <img src="images/start1.png" class="start-photo">
                                </a>
                            </div>
                            <div class="pro-item-area">
                                <h2 class="start-name">林更新</h2>
                                <h3 class="pro-desc">支持 <a href="#">贫困孤儿助养</a> 项目</h3>
                                <p class="proj12">已有 <strong>32, 323</strong> 人捐助 &nbsp;&nbsp;&nbsp;&nbsp;</p>
                                <p class="proj12">已筹 <strong>3, 341</strong> 元</p>
                                <p class="start-text proj12_org">善款接收：中华社会救助基金会</p>
                            </div>
                        </li>
                        <li>
                            <div class="start-photo-area">
                                <a href="#" class="item-link">
                                    <img src="images/start2.png" class="start-photo">
                                </a>
                            </div>
                            <div class="pro-item-area">
                                <h2 class="start-name">TFBOYS</h2>
                                <h3 class="pro-desc">支持 <a href="#">贫困孤儿助养</a> 项目</h3>
                                <p class="proj12">已有 <strong>32, 323</strong> 人捐助 &nbsp;&nbsp;&nbsp;&nbsp;</p>
                                <p class="proj12">已筹 <strong>3, 341</strong> 元</p>
                                <p class="start-text proj12_org">善款接收：中华社会救助基金会</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            
        </div>

<!--企业-->

<div class="company module" style="display:block; background:#fff;">
            <div class="block-inner" style="border-bottom:2px solid #e6e6e6;text-align:center;">
                <div class="titile-inner" style="float:none; padding-bottom:15px;">
                    <h3 class="sm-title"><strong>支持企业</strong></h3>
                </div>
            </div>
            <div class="company-area gdh">
               
<style type="text/css">
					/* 本例子css -------------------------------------- */
	.picScroll{ margin:10px auto; text-align:center; position: relative; }
	.picScroll .bd ul{ width:100%;  float:left; padding-top:10px;  }
	.picScroll .bd li{ width:25%; float:left; font-size:14px; text-align:center;  }
	.picScroll .bd li a{-webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* 取消链接高亮 */ }
	.picScroll .bd li img{ width:95%; display: block; margin: 0 auto; border-radius: 100%;  }


	.picScroll .hd{ 
	position: absolute;
 
    width: 100%;
    top: 34%;
    z-index: 100;
   }
		.picScroll .hd img{
			width: 20px;
		}
	.picScroll .hd ul{ float:right; padding-top:16px; display: none;  }	
	.picScroll .hd li{ float:left; width:8px; height:8px; background:#D0D0D0; margin:0 5px; overflow:hidden; 
	-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; 
	}
	.picScroll .hd .on{ background:#80BD6D;  }
	.picScroll .prev,.picScroll .next{position: absolute; top: 0; }
	.picScroll .prev{
		left: 2%;
	}
	.picScroll .next{  right: 2%;}

.tempWrap{
	    width: 80%;
    margin: 0 auto;
}
				</style>
                    <!-- 本例主要代码 Start ================================ -->
			<div id="picScroll" class="picScroll">
				<div class="hd">
					
						<span class="next"><img src="images/right.png"/></span>
						<ul ></ul>
						<span class="prev"><img src="images/left.png"/></span>
					
				</div>
				
				<script src="js/TouchSlide.1.1.js" type="text/javascript" charset="utf-8"></script>
				<div class="bd">
						<ul>
							<li><a href="FamousInfo.aspx?id=18"  target="ifm"><img src="images/company2.png" alt="" /></a></li>       
                             <li><a href="FamousInfo.aspx?id=18"  target="ifm"><img src="images/company2.png" alt="" /></a></li>        
                             <li><a href="FamousInfo.aspx?id=18"  target="ifm"><img src="images/company2.png" alt="" /></a></li>
                             <li><a href="FamousInfo.aspx?id=18"  target="ifm"><img src="images/company2.png" alt="" /></a></li>
						</ul>

						<ul>
							<li><a href="FamousInfo.aspx?id=18"  target="ifm"><img src="images/company2.png" alt="" /></a></li>
        
                             <li><a href="FamousInfo.aspx?id=18"  target="ifm"><img src="images/company2.png" alt="" /></a></li>
                        
                             <li><a href="FamousInfo.aspx?id=18"  target="ifm"><img src="images/company2.png" alt="" /></a></li>
						</ul>

						<ul>
							<li><a href="FamousInfo.aspx?id=18"  target="ifm"><img src="images/company2.png" alt="" /></a></li>
        
                             <li><a href="FamousInfo.aspx?id=18"  target="ifm"><img src="images/company2.png" alt="" /></a></li>
                        
                             <li><a href="FamousInfo.aspx?id=18"  target="ifm"><img src="images/company2.png" alt="" /></a></li>
						</ul>

				</div>
				

			</div>
			<script type="text/javascript">
				TouchSlide({ 
					slideCell:"#picScroll",
					titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
					autoPage:true, //自动分页
					pnLoop:"false", // 前后按钮不循环
					switchLoad:"_src" ,//切换加载，真实图片路径为"_src" 
					autoPlay:"false"
				});
			</script>

   
            </div>
        </div>
        
        
        
        
<!--鸣谢-->

<div class="company module" style="display:block; background:#fff;">
            <div class="block-inner" style="border-bottom:2px solid #e6e6e6;text-align:center; padding-bottom:15px;padding-top:10px;">
                <div class="titile-inner" style="float:none;">
                    <h3 class="sm-title"><strong>特别鸣谢</strong></h3>
                </div>
            </div>
            <div class="company-area asfaf">

<style type="text/css">
					/* 本例子css -------------------------------------- */
	.picScroll1{ margin:10px auto; text-align:center; position: relative; }
	.picScroll1 .bd ul{ width:100%;  float:left; padding-top:10px;  }
	.picScroll1 .bd li{ width:25%; float:left; font-size:14px; text-align:center;  }
	.picScroll1 .bd li a{-webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* 取消链接高亮 */ }
	.picScroll1 .bd li img{ width:95%; display: block; margin: 0 auto; border-radius: 100%;  }


	.picScroll1 .hd{ 
	position: absolute;
 
    width: 100%;
    top: 34%;
    z-index: 100;
   }
		.picScroll1 .hd img{
			width: 20px;
		}
	.picScroll1 .hd ul{ float:right; padding-top:16px; display: none;  }	
	.picScroll1 .hd li{ float:left; width:8px; height:8px; background:#D0D0D0; margin:0 5px; overflow:hidden; 
	-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; 
	}
	.picScroll1 .hd .on{ background:#80BD6D;  }
	.picScroll1 .prev,.picScroll1 .next{position: absolute; top: 0; }
	.picScroll1 .prev{
		left: 2%;
	}
	.picScroll1 .next{  right: 2%;}

.tempWrap{
	    width: 80%;
    margin: 0 auto;
}
				</style>
                    <!-- 本例主要代码 Start ================================ -->
			<div id="picScroll1" class="picScroll1">
				<div class="hd">
					
						<span class="next neaaaa"><img src="images/right.png"/></span>
						<ul ></ul>
						<span class="prev"><img src="images/left.png"/></span>
					
				</div>
				
				
				<div class="bd">
						<ul>
							<li><a href="FamousInfo.aspx?id=18"  target="ifm"><img src="images/company2.png" alt="" /></a></li>       
             <li><a href="FamousInfo.aspx?id=18"  target="ifm"><img src="images/company2.png" alt="" /></a></li>        
             <li><a href="FamousInfo.aspx?id=18"  target="ifm"><img src="images/company2.png" alt="" /></a></li>
             <li><a href="FamousInfo.aspx?id=18"  target="ifm"><img src="images/company2.png" alt="" /></a></li>
						</ul>

						<ul>
							<li><a href="FamousInfo.aspx?id=18"  target="ifm"><img src="images/company2.png" alt="" /></a></li>
        
             <li><a href="FamousInfo.aspx?id=18"  target="ifm"><img src="images/company2.png" alt="" /></a></li>
        
             <li><a href="FamousInfo.aspx?id=18"  target="ifm"><img src="images/company2.png" alt="" /></a></li>
						</ul>

						<ul>
							<li><a href="FamousInfo.aspx?id=18"  target="ifm"><img src="images/company2.png" alt="" /></a></li>
        
             <li><a href="FamousInfo.aspx?id=18"  target="ifm"><img src="images/company2.png" alt="" /></a></li>
        
             <li><a href="FamousInfo.aspx?id=18"  target="ifm"><img src="images/company2.png" alt="" /></a></li>
						</ul>

				</div>
				

			</div>
			<script type="text/javascript">
				TouchSlide({ 
					slideCell:"#picScroll1",
					titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
					autoPage:true, //自动分页
					pnLoop:"false", // 前后按钮不循环
					switchLoad:"_src" ,//切换加载，真实图片路径为"_src" 
					autoPlay:"false"
				});
			</script>
            </div>
        </div>
                    

</div> <!--main jieshu-->


<div class="footer" style=" width:100%; margin:0 auto;">
        <div style=" width:66%; margin:0 auto;">
            <p><img src="images/cishan.png" style=" float:left; width:30%; height:30%;"/></p>
            <p style=" float:right; font-size:1.2rem; font-weight:400; text-align:center; margin-top:12px;">大爱之城慈善基金</br>
                                                                <span style=" font-size:0.9rem; font-weight:400; ">电话：0371-53535633</span></p>
             <div class="clear"></div>
        </div>
    </div>





    </div>
    

   
  

    
  </div>
  



</body>
</html>



















